<!--
  描述信息展示 
  通用信息
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/06 10:11
-->
<template>
  <view :class="{'c-desc-view-item': true, 'bottom-border': props.bottomBorder }" >
    <view class="title">
		<slot name="title">{{ props.title }}</slot>
	</view> 
	<view class="desc">
	<slot name="desc">
		<image v-if="props.descIsImg && props.desc" :src="props.desc" mode="scaleToFill" class="default-img" />
		<template v-else>{{ props.desc }}</template>
	</slot>
	</view>
  </view>
</template>

<script setup>
const props = defineProps({
	
	// 标题
	title: { type: String },
	
	// 描述
	desc: { type: String }, 
	
	// 描述是否是图片
	descIsImg: { type: Boolean, default: false }, 
	
	// 下边框 
	bottomBorder: { type: Boolean, default: false }, 
	
  
  
})
</script>

<style lang="scss" scoped>
	.c-desc-view-item {
	  display: flex;
	  justify-content: space-between;
	  padding: 20rpx 40rpx;
	  font-size: 30rpx;
	  font-weight: 400;
		
	  .title {
		display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
		  width: 200rpx;
	    color: #808080;
	  }
	  .desc {
	    flex: 1;
	    text-align: right;
	    color: #000;
	  }
		
	  &:first-child {
	    margin-top: 20rpx;
	  }
	  &:last-child {
	    margin-bottom: 20rpx;
	  }
	  
	  .default-img {
	    width: 150rpx;
	    height: 150rpx;
	    background-color: #f7f7f7;
	  }
	  
	}
	
	.bottom-border {
	  padding-bottom: 40rpx;
	  border-bottom: 1rpx solid #ededed;
	}

</style>
